<script setup>
import {ref} from "vue"

const props = defineProps({
    elem: {
        type: Object,
        default: () => {
            return {
                styleConfig: {},
                dataConfig: {}
            }
        }
    }
})
const formType = ref("style")
const edit = ref(false)
</script>

<template>
    <div class="Picture1 print-template-element-form-container ">
        <el-radio-group v-model="formType" size="small">
            <el-radio-button value="style">样式</el-radio-button>
            <el-radio-button value="data">数据</el-radio-button>
        </el-radio-group>
        <el-divider style="margin: 10px 0"></el-divider>
        <!--样式表单-->
        <el-form v-if="formType==='style'" :model="elem.styleConfig" class="form" label-position="left" label-width="auto" size="small">
            <div class="node-name" @dblclick="edit = true">
                <el-input v-if="edit" v-model="elem.name" autofocus @blur="edit = false" @keydown="e => e.code === 'Enter' ? edit = false : ''" />
                <span v-else style="font-size: 20px">{{ elem.name }}</span>
            </div>
            <el-form-item label="宽">
                <el-input v-model="elem.styleConfig.width" />
            </el-form-item>
            <el-form-item label="高">
                <el-input v-model="elem.styleConfig.height" />
            </el-form-item>
            <el-form-item label="圆角">
                <el-input v-model="elem.styleConfig.borderRadius" />
            </el-form-item>
            <FCssStyle :css-style="elem.styleConfig" @use="sty => elem.styleConfig = sty"/>
        </el-form>
        <!--数据表单-->
        <el-form v-if="formType==='data'" :model="elem.dataConfig" class="form" label-position="left" label-width="auto" size="small">
            <el-form-item label="数据绑定方式">
                <el-radio-group v-model="elem.dataConfig.bindType">
                    <el-radio value="static">静态</el-radio>
                    <el-radio value="dynamic">动态</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="elem.dataConfig.bindType === 'static'" label="数据">
                <el-input v-model="elem.dataConfig.value" type="textarea" :rows="8" />
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>

</style>